<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { NSpin, useMessage } from 'naive-ui'
import { queryTaskList } from '@/api/seed'

const $emit = defineEmits(['drawSent'])

interface Task {
  taskId: string
  startTime: string
  endTime: string
  status: string
  ossUrl: string
  result: string
}

const ms = useMessage()
let taskList: Task[] = []
const loading = ref(false)

const handleCurrentChange = (val: Task) => {
  $emit('drawSent', { action: 'preview', url: val.ossUrl || val.result })
}

onMounted(() => {
  loading.value = true
  queryTaskList().then((d) => {
    taskList = d as unknown as Task[]
    console.log('taskList', taskList)
    loading.value = false
  }).catch(() => {
    loading.value = false
    ms.error('获取任务列表失败')
  })
})
</script>

<template>
  <NSpin :show="loading">
    <el-table
      :data="taskList" border highlight-current-row style="width: 100%;" :row-class-name="(row: Task, index: number) => {
        return row.status === 'COMPLETED' ? 'bg-green-100' : row.status === 'FAILED' ? 'bg-red-100' : 'bg-yellow-100';
      }"
      @current-change="handleCurrentChange"
    >
      <el-table-column prop="startTime" label="开始时间" />
      <el-table-column prop="endTime" label="结束时间" />
      <el-table-column prop="status" label="状态" />
    </el-table>
  </NSpin>
  <div v-if="taskList.length === 0 && !loading" class="text-center text-gray-500 mt-8">
    暂无任务记录
  </div>
</template>

<style scoped></style>
